<script lang="ts">
import {defineComponent} from 'vue'
import ListPage from "@/components/ListPage/index.vue";
import DynamicForm from "@/components/DynamicForm3/index.vue";
import DynamicTable from "@/components/DynamicTable3/index.vue";
import {SearchListParams, SearchListResult} from "@/components/ListPage/type";
import {TableConfigItem} from "@/components/DynamicTable3/types";
import {FormConfigItem} from "@/components/DynamicForm3/types";
import {ElMessage, ElMessageBox} from "element-plus";
import {userReq} from "@/api/user";
import DialogUser from "@/views/user/userManage/DialogUser.vue";
import {EditDirOptions} from "@/config/options";
export default defineComponent({
  name: "UserManage",
  components: {DialogUser, DynamicTable, DynamicForm, ListPage},
  data() {
    return {
      tableConfgList: [
        {
          label: '用户名',
          prop: 'username',
          minWidth: '120px',
        },
        {
          label: '操作',
          slotName: 'caozuo',
          align: 'center',
          minWidth: '120px',
        },
      ] as TableConfigItem[],
      formData: {} as any,
      formConfigList: [
        {
          type: 'input',
          label: '用户名',
          prop: 'username',
          search: true,
          props: {
            clearable: true,
          }
        },
      ] as FormConfigItem[],
    }
  },
  methods: {
    getList() {
      this.$refs.ListPageRef.getList()
    },
    editRow(row){
      this.$refs.DialogUserRef.open(EditDirOptions.edit,row)
    },
    async resetGetList2(){
      await this.$refs.DynamicFormRef.resetFields()
      this.$refs.ListPageRef.resetGetList()
    },
    searchList(search:SearchListParams):Promise<SearchListResult> {
      return userReq.userList({
        ...search,
        ...this.formData
      }).then(res => {
        return {
          list: res.data.records,
          total: res.data.total,
        }
      })
    },
    deleteRow(row){
      ElMessageBox.confirm('是否删除？','删除',{
        type: 'warning'
      }).then(()=>{
        userReq.delUser(row.userId).then((res)=>{
          ElMessage.success(res.data as string)
          this.getList()
        })
      })
    },
    resetPassword(row){
      ElMessageBox.prompt('请输入新的密码', '提示', {
        inputType: 'password'
      })
        .then(({ value }) => {
          userReq.resetPassword(row.username,value).then((res)=>{
            ElMessage.success(res.data as string)
            this.getList()
          })
        })
        .catch(() => {
        })
    },
    resetInitPassword(){
      ElMessageBox.prompt('请输入新的密码', '提示', {
        inputType: 'password'
      })
        .then(({ value }) => {
          userReq.resetInitPassword(value).then((res)=>{
            ElMessage.success(res.data as string)
          })
        })
        .catch(() => {
        })
    },
    lookRow(row){
      this.$refs.DialogUserRef.open(EditDirOptions.look,row)
    },
    addRow() {
      this.$refs.DialogUserRef.open(EditDirOptions.add)
    }
  }
})
</script>

<template>
  <div class="app-container">
    <ListPage
      ref="ListPageRef"
      :search-list="searchList"
    >
      <template #search="{getList,resetGetList}">
        <DynamicForm
          v-model="formData"
          search
          ref="DynamicFormRef"
          :created-init-value="false"
          :form-config-list="formConfigList"
          @search="getList"
        >
          <el-form-item>
            <el-button
              type="primary"
              @click.stop="addRow"
            >新增用户</el-button>
            <el-button
              type="primary"
              @click.stop="getList"
            >搜索</el-button>
            <el-button
              @click.stop="resetGetList2"
            >重置</el-button>
            <el-button
              v-permission="['initAdmin']"
              @click.stop="resetInitPassword"
            >重置初始管理员密码</el-button>
          </el-form-item>
        </DynamicForm>
      </template>
      <template #list="{listData,listHeight,loading}">
        <DynamicTable
          :data="listData"
          :created-init-value="false"
          :height="listHeight"
          :table-config-list="tableConfgList"
        >
          <template #caozuo_default="{row, column, $index,tableData}">
            <el-button
              type="primary"
              text
              @click.stop="editRow(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              text
              @click.stop="deleteRow(row)"
            >删除</el-button>
            <el-button
              type="primary"
              text
              @click.stop="lookRow(row)"
            >查看</el-button>
            <el-button
              v-permission="['initAdmin','admin']"
              type="primary"
              text
              @click.stop="resetPassword(row)"
            >密码重置</el-button>
          </template>
        </DynamicTable>
      </template>
    </ListPage>
    <DialogUser
      ref="DialogUserRef"
      @success="getList"
    ></DialogUser>
  </div>
</template>

<style scoped lang="scss">

</style>
